<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { login } from "../api/user";
import profile from "../profile";

const formRef = ref()
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const store = useStore()
const form = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{required: true, message: '请输入用户名'}],
  password: [{required: true, message: '请输入密码'}],
}

function onLoginSubmit() {
  console.log('onLoginSubmit')
  if (loading.value) return
  formRef.value.validate(async (v) => {
    if (!v) return
    loading.value = true
    try {
      await login(form)
      await profile(router, route, store)
      // router.replace('/home')
    } finally {
      loading.value = false
    }
  })
}

</script>

<template>
  <div class="login">
    <div class="login-dialog">
      <div class="title">登录管理后台</div>
      <el-form ref="formRef" class="login-form" :model="form" :rules="rules" @submit.native.prevent>
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input show-password v-model="form.password" placeholder="密码" />
        </el-form-item>
        <el-form-item style="padding-top:16px">
          <el-button style="width:100%" type="primary" @click="onLoginSubmit" native-type="submit" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style>
  .login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: linear-gradient(306deg, rgba(54, 54, 54, 0.05) 0%, rgba(54, 54, 54, 0.05) 33.333%,rgba(85, 85, 85, 0.05) 33.333%, rgba(85, 85, 85, 0.05) 66.666%,rgba(255, 255, 255, 0.05) 66.666%, rgba(255, 255, 255, 0.05) 99.999%),linear-gradient(353deg, rgba(81, 81, 81, 0.05) 0%, rgba(81, 81, 81, 0.05) 33.333%,rgba(238, 238, 238, 0.05) 33.333%, rgba(238, 238, 238, 0.05) 66.666%,rgba(32, 32, 32, 0.05) 66.666%, rgba(32, 32, 32, 0.05) 99.999%),linear-gradient(140deg, rgba(192, 192, 192, 0.05) 0%, rgba(192, 192, 192, 0.05) 33.333%,rgba(109, 109, 109, 0.05) 33.333%, rgba(109, 109, 109, 0.05) 66.666%,rgba(30, 30, 30, 0.05) 66.666%, rgba(30, 30, 30, 0.05) 99.999%),linear-gradient(189deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 33.333%,rgba(55, 55, 55, 0.05) 33.333%, rgba(55, 55, 55, 0.05) 66.666%,rgba(145, 145, 145, 0.05) 66.666%, rgba(145, 145, 145, 0.05) 99.999%),linear-gradient(90deg, rgb(9, 201, 186),rgb(18, 131, 221));
  }
  .login-dialog {
    /* height: 200px; */
    max-height: 70%;
    width: 300px;
    max-width: 80%;
    padding: 30px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 16px #888888;
  }
  .login-dialog .title {
    margin-bottom: 30px;
    font-size: 24px;
  }
  .login-form {
    width: 100%;
  }
</style>